<!--
 * @Author: 尹艳婷
 * @Date: 2022-05-27
 * @Description: 多栏目超出隐藏
 * @FilePath: \code\ctp-static-portal-front\src\components\tabs\components\hide-more.vue
-->
<template>
  <div
    class="hide-more"
    :style="{ 'margin-right': `${hideMoreRightLen}px` }"
    @mouseenter="isDisplay()"
    @mouseleave="isHide()"
  >
    <div class="arrowMore" :style="{ border: `solid 1px ${sectionStyle.sectionHeaderTabsColor}` }">
      <i
        class="vportal vp-arrow-down-serif"
        :style="{ color: sectionStyle.sectionHeaderTabsColor }"
      ></i>
    </div>
    <div class="moreListArea" :style="{ display: isHidden ? 'none' : 'block' }">
      <ul class="moreList">
        <li
          class="nav-tab-more"
          v-for="(title, index) in titlesToHide"
          :key="index"
          :style="{
            color:
              index + titlesToHideIndex === selected
                ? sectionStyle.sectionHeaderTabsCurrentColor
                : '#666',
          }"
          :title="title.title"
          @click="selectTab(index + titlesToHideIndex)"
        >
          {{ title.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HideMore',
    props: {
      titlesToHide: {
        type: Array,
      },
      selected: {
        type: Number,
      },
      selectTab: {
        type: Function,
      },
      sectionStyle: {
        type: Object,
      },
      titlesToHideIndex: {
        type: Number,
      },
      hideMoreRightLen: {
        type: Number,
      },
    },
    data() {
      return {
        isHidden: true,
      };
    },
    methods: {
      // 移入显示
      isDisplay() {
        this.isHidden = false;
      },
      // 移出隐藏
      isHide() {
        this.isHidden = true;
      },
    },
  };
</script>
<style lang="scss" scoped>
  // 超出隐藏
  .hide-more {
    position: absolute;
    // display: none;
    top: 50%;
    right: 152px;
    z-index: 52;
    width: 20px;
    height: 20px;
    margin-top: -10px !important;
    margin-right: 35px;

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .arrowMore {
      width: 16px;
      height: 16px;
      margin-top: 1px;
      margin-left: 1px;
      font-size: 16px;
      line-height: 16px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
    }

    .moreListArea {
      position: absolute;
      top: 16px;
      right: -35px;
      width: 90px;
      height: auto;
      // display: none;
      padding-top: 10px;

      .moreList {
        padding: 5px 0;
        color: #333;
        background-color: #fff;
        border: solid 1px #d4d9e3;
        box-shadow: 0 2px 4px 0 rgb(212, 217, 227);

        &::before {
          position: absolute;
          top: 5px;
          left: 50%;
          display: block;
          width: 10px;
          height: 10px;
          margin-left: -6px;
          background-color: #fff;
          border-top: solid 1px #d4d9e3;
          border-right: solid 1px #d4d9e3;
          border-bottom: solid 1px #fff;
          border-left: solid 1px #fff;
          content: '';
          -webkit-transform: rotate(-45deg);
        }

        .nav-tab-more {
          position: relative;
          height: 30px;
          max-width: 90%;
          padding: 0 5px;
          overflow: hidden;
          font-size: 12px;
          line-height: 30px;
          color: #666;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
      }
    }
  }
</style>
